<template>
  <div>
    <div class="container-box" ref="containerBox">
      <button
        class="prev left-arrow"
        @click="jump(-1)"
        @mouseenter="prevBtnActive = true"
        @mouseleave="prevBtnActive = false"
      >
        <i
          :class="{ 'text-primary': prevBtnActive }"
          class="iconfont icon-youjiantou text-secondary"
        ></i>
      </button>
      <div class="container" v-if="list.length">
        <ul
          class="item-list item-list-slider"
          :style="{ visibility: loading ? 'hidden' : '' }"
        >
          <li
            @mouseenter="activeIndex = index"
            @mouseleave="activeIndex = null"
            class="item"
            v-for="(item, index) in list"
            :key="index"
          >
            <a
              :href="parseFullPath(item.path)"
              target="_blank"
              class="teacher-card flex-center flex-column-wrap"
              :style="{
                backgroundColor: index % 2 == 0 ? '#DAEAFA' : '#FAEEE9'
              }"
              @click="goToTeacherDetail(item)"
            >
              <span class="db teacher-img-box">
                <img
                  class="teacher-img"
                  v-lazy="parseResourceUrl(item.avatar)"
                  alt="老师头像"
                />
              </span>
            </a>
            <a
              class="teacher-card-inner pointer"
              @click="goToTeacherDetail(item)"
            >
              <span class="flex-center-wrap">
                <span class="teacher-name f18 dis-b">
                  {{ item.teacher_name }}
                </span>
                <label class="label f10 ml10 dis-b">
                  {{ item.teacher_tag }}
                </label>
              </span>
              <span class="flex-wrap flex-bottom-wrap flex-justify-between">
                <span class="db teacher-profile text-third f12 text-ess-1">
                  {{ item.description }}
                </span>
                <zl-icon
                  v-if="activeIndex === index"
                  :row-data="item"
                  icon="icon-jinru"
                  :icon-style="iconStyle"
                  @on-click="handleIconClick"
                ></zl-icon>
              </span>
            </a>
          </li>
        </ul>
      </div>
      <button
        class="next"
        @click="jump(1)"
        @mouseenter="nextBtnActive = true"
        @mouseleave="nextBtnActive = false"
      >
        <i
          :class="{ 'text-primary': nextBtnActive }"
          class="iconfont icon-youjiantou text-secondary"
        ></i>
      </button>
    </div>
  </div>
</template>

<script>
import zlIcon from './zlIcon.vue'
export default {
  name: 'teacherIndex',
  props: {
    teacherList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    'zl-icon': zlIcon
  },
  data() {
    return {
      loading: true,
      distance: 0,
      timer: null,
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      activeIndex: null,
      iconStyle: {
        width: '15px',
        height: '12px',
        marginLeft: '10px',
        fontColor: '#383838'
      },
      prevBtnActive: false,
      nextBtnActive: false
    }
  },
  methods: {
    jump(minus, autoPlay = false) {
      // 小于四个不需要轮播
      // this.distance = -2128
      if (this.list.length <= 4) {
        return
      }
      if (!autoPlay) {
        this.stopTimer()
      }
      let distance = this.distance

      if (!this.$refs.containerBox) {
        return
      }
      let el = this.$refs.containerBox.querySelector('.item-list')
      if (!el) {
        return
      }

      this.distance = distance - minus * 304
      if (this.distance >= 0) {
        this.distance = 0
      }
      let len = this.$refs.containerBox.querySelectorAll('.item-list .item')
        .length

      let maxDistance = (len - 4) * 304
      if (Math.abs(this.distance) >= maxDistance) {
        this.distance = -maxDistance
      }
      el.style.transform = `translateX(${this.distance}px)`
    },
    startTimer() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.jump(1, true)
      }, 3000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
    // 跳转到老师详情页
    goToTeacherDetail(row) {
      this.zlaBtn = {
        key_name: '之了名师',
        key_content: row.teacher_name
      }
      // let { teacher_id } = row
      // if (!teacher_id) {
      //   this.$message.warning('缺少老师ID')
      // }
      // this.goTo(`/teacher/${teacher_id}.html`,{target:'_blank',watch:true})
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    handleIconClick(row) {
      this.zlaBtn = {
        key_name: '之了名师',
        key_content: row.teacher_name
      }
      let { teacher_id } = row
      if (!teacher_id) {
        this.$message.warning('缺少老师ID')
      }
      this.goTo(`/teacher/${teacher_id}.html`, {
        target: '_blank',
        watch: true
      })
    }
  },
  computed: {
    list() {
      let list = []
      if (this.teacherList.length > 4) {
        list = this.teacherList
          .slice(-4)
          .concat(this.teacherList)
          .concat(this.teacherList.slice(0, 4))
      } else {
        list = this.teacherList || []
      }
      return list
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this

      let scrollEl = document.querySelector('.item-list')
      scrollEl.style.transition = 'none'
      if (this.list.length < 5) {
        scrollEl.style.transform = 'translateX(0)'
        _this.distance = 0
      } else {
        scrollEl.style.transform = 'translateX(-1216px)'
        _this.distance = -1216
      }

      setTimeout(() => {
        scrollEl.style.transition = 'transform .3s'
        _this.loading = false
      }, 100)
      // 往右切换到底最大距离
      let rightMaxDistance = -1 * (4 + this.teacherList.length) * 304
      scrollEl.addEventListener('transitionend', () => {
        if (_this.distance <= rightMaxDistance) {
          scrollEl.style.transition = `none`
          scrollEl.style.transform = `translateX(-1216px)`
          _this.distance = -1216
          setTimeout(() => {
            scrollEl.style.transition = 'transform .3s'
          }, 100)
        }
        if (_this.distance >= 0) {
          scrollEl.style.transition = `none`
          scrollEl.style.transform = `translateX(${-1 *
            this.teacherList.length *
            304}px)`
          _this.distance = -1 * this.teacherList.length * 304
          setTimeout(() => {
            scrollEl.style.transition = 'transform .3s'
          }, 100)
        }
      })
    })

    // 大于四个开启自动轮播定时器
    if (this.list.length > 4) {
      this.$refs.containerBox.onmouseenter = () => {
        this.stopTimer()
      }
      this.$refs.containerBox.onmouseleave = () => {
        this.startTimer()
      }
      this.startTimer()
    }
  },
  beforeDestroy() {
    this.stopTimer()
  }
}
</script>

<style scoped>
.dis-b {
  display: block;
}
.container {
  width: 1196px;
  height: 260px;
  overflow: hidden;
  border-radius: 12px;
}
.item-list {
  width: 9999px;
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  font-size: 0;
  color: #000;
  border-radius: 12px;
}
.item-list-slider {
  left: 0;
  transition: transform 0.3s;
}
.item {
  width: 284px;
  height: 250px;
  margin: 0;
  margin-right: 20px;
  padding: 0;
  border: 0;
  display: inline-block;
}
.item {
  color: #fff;
}
.container-box {
  position: relative;
  display: inline-block;
}
button {
  align-self: center;
  background-color: #fff;
  cursor: pointer;
}
.prev {
  z-index: 1;
  position: absolute;
  top: 30%;
  left: -26px;
  transform: translateY(calc(-50% - 37px));
  border-radius: 50%;
  border: none;
  width: 40px;
  height: 40px;
  background: #ffffff;
  transform: rotate(180deg);
  box-shadow: 0px 2px 10px 0px rgba(202, 203, 204, 0.5);
}
.next {
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(calc(-50% - 37px));
  z-index: 1;
  border-radius: 50%;
  border: none;
  width: 40px;
  height: 40px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(202, 203, 204, 0.5);
}
.teacher-card {
  cursor: pointer;
  position: relative;
  width: 284px;
  height: 174px;
  border-radius: 12px;
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 95.098% 14.811%;
}
.teacher-card-inner {
  display: block;
  box-sizing: border-box;
  padding: 14px 16px 10px;
  background: #ffffff;
  color: #383838;
  border-radius: 12px;
}
.item:hover {
  box-shadow: 0px 2px 15px 0px rgba(229, 233, 240, 0.5);
  /* background: #ffffff; */
  border-radius: 12px;
  /* opacity: 0.9; */
}
/* .teacher-card-inner:hover {
  background-color: #3480ff;
} */
/* .teacher-card-inner:hover .teacher-name {
  color: white;
} */
/* .teacher-card-inner:hover .label {
  background-color: rgba(230, 234, 255, 0.2);
  color: #ffd34d;
}
.teacher-card-inner:hover .teacher-profile {
  color: #d6e5ff;
}
.teacher-card-inner:hover .free-watch-btn {
  color: #fff;
}
.teacher-card-inner:hover .icon-mianfeikanle {
  color: #fff;
} */
.teacher-img-box {
  position: relative;
  width: 250px;
  height: 200px;
  overflow: hidden;
  /* object-fit: contain; */
}
.teacher-profile {
  margin-top: 7px;
}
.teacher-img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 10px;
  width: 184px;
  height: auto;
}
.teacher-img[lazy='loading'],
.teacher-img[lazy='error'] {
  width: 50px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  transition: none;
}
.label {
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  line-height: 20px;
  background: #fff3eb;
  border-radius: 4px;
  color: #ff8d38;
}
.teacher-name {
  line-height: 25px;
}
.text-primary {
  color: #383838 !important;
}
.text-secondary {
  color: #666666;
}
.text-third {
  color: #999999;
}
</style>
